.c-show {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translateY(0px);
  transition: transform 1s ease;
}

.c-show.low-position {
  transform: translateY(60px);
}

/* show cover */
.c-earthCover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.c-earthCover__cover {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 375px;
  height: 600px;
  margin: -300px 0 0 -187.5px;
  background-image: url(../images/bg_index_cover.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  pointer-events: none;
}
.c-earthCover__tips {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 325px;
  height: 89px;
  margin: -35px 0 0 -162.5px;
  background-image: url(../images/bg_tips.png);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.c-earthCover__hand {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 16px;
  height: 19px;
  margin-left: -8px;
  background-image: url(../images/hand.png);
  background-size: cover;
  animation: moveHand 2s linear infinite;
}
.c-earthCover__coord {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 117px;
  height: 18px;
  margin: -253px 0 0 -58.5px;
  background-size: 124px 95px;
  background-image: url(../images/bg_coord.png);
  background-repeat: no-repeat;
  transition: all .5s ease;
}

/* show earth */
.c-earth {
  position: absolute;
  top: -40px; /* to let earth right at the center of cover image */
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* clouds */
.c-clouds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.c-clouds__spriteContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

/* background video */
.c-videoSprite {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.c-videoSprite__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

/* show actions */
.c-actions {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
}

.c-actions__longPress {
  position: absolute;
  display: inline-block;
  left: 138px;
  bottom: 30px;
  width: 99px;
  height: 133px;
  opacity: 0;
  background-image: url(../images/btn_show.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity .5s ease;
}

.c-actions__longPress.is-active {
  opacity: 1;
  animation: twinkle 2s linear infinite;
}

.c-actions__longPressText {
  position: absolute;
  display: inline-block;
  left: 146px;
  bottom: 136px;
  width: 83px;
  height: 27px;
  opacity: 0;
  background-image: url(../images/btn_show_text.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity .5s ease;
}

.c-actions__longPressText.is-active {
  opacity: 1;
}

.c-actions__xplan {
  position: absolute;
  display: inline-block;
  opacity: 0;
  right: 55px;
  bottom: 52px;
  width: 66px;
  height: 70px;
  background-image: url(../images/btn_end.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity .5s ease;
}

.c-actions__xplan.is-active {
  opacity: 1;
}

/* end cover */
.c-endCover {
  position: absolute;
  top: -60px;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 30;
}

.c-endCover__slogan {
  position: absolute;
  top: 20px;
  left: 48px;
  width: 279px;
  height: 127px;
  background-image: url(../images/end_slogan.png);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  animation: fadeIn 1s linear 10s;
  animation-fill-mode: forwards;
}

.c-endCover__texts {
  position: absolute;
  top: 40px;
  left: 86px;
  width: 203px;
  height: 83px;
  animation: fadeOut 1s linear 9s;
  animation-fill-mode: forwards;
}

.c-endCover__text {
  position: absolute;
  width: 100%;
  background-image: url(../images/end_text.png);
  background-size: 203px 83px;
  opacity: 0;
}
.c-endCover__text.line1 {
  top: 0;
  height: 18px;
  background-position: 0 0;
  animation: fadeIn 1s linear 1s;
  animation-fill-mode: forwards;
}
.c-endCover__text.line2 {
  top: 18px;
  height: 22px;
  background-position: 0 -18px;
  animation: fadeIn 1s linear 3s;
  animation-fill-mode: forwards;
}
.c-endCover__text.line3 {
  top: 40px;
  height: 22px;
  background-position: 0 -40px;
  animation: fadeIn 1s linear 5s;
  animation-fill-mode: forwards;
}
.c-endCover__text.line4 {
  top: 62px;
  height: 21px;
  background-position: 0 -62px;
  animation: fadeIn 1s linear 7s;
  animation-fill-mode: forwards;
}

.c-endCover__actions {
  position: absolute;
  left: 33px;
  bottom: 40px;
  width: 309px;
  height: 50px;
  opacity: 0;
  animation: fadeIn 1s linear 10s;
  animation-fill-mode: forwards;
}
.c-endCover__backBtn {
  position: relative;
  display: inline-block;
  width: 140px;
  height: 50px;
  float: left;
  background-image: url(../images/btn_back.png);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

.c-endCover__registerBtn {
  position: relative;
  display: inline-block;
  width: 140px;
  height: 50px;
  float: right;
  background-image: url(../images/btn_register.png);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}


/* animations */
@keyframes moveHand {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
  }
  25% {
    -webkit-transform: translate3d(-10px, 0, 0);
  }
  50% {
    -webkit-transform: translate3d(0, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
  }
}

@keyframes twinkle {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.9;
  }
  100% {
    opacity: 0.5;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
